<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="common" th:with="title='后台账户管理'"></head>
<body class="hold-transition skin-blue sidebar-mini">

<div th:include="main-header"></div>
<div th:include="model" id="modelHtml" ></div>
<div class="content-wrapper">
	<section class="content">
		<div class="panel panel-default">
			<form role="form" method="post" name="dealerQueryForm"
				id="dealerQueryForm">
				<div class="row">
					<div class="col-lg-12">
						<div class="panel-heading">账户管理</div>
						<div class="panel-body">
							<div class="row">
								<div class="col-lg-3">
									<div class="form-group">
										<input type="text" name="queryName" id="queryName"
											class="form-control" placeholder="用户名" />
										
									</div>
								</div>
								<div class="col-lg-3">
									<div class="form-group">
										<input type="text" name="queryPhone" id="queryPhone"
											class="form-control" placeholder="手机号" />
										
									</div>
								</div>
								<div class="col-lg-3">
									<div class="form-group">
										<button type="button" onclick="refresh()" class="btn btn-primary">查询</button>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</form>
		</div>
		<div class="panel panel-default">
			<div class="row">
				<div class="col-lg-12">
					<div class="panel-body">
						<div id="toolbar" class="btn-group">
							<button type="button" class="btn btn-primary" style="width:100px;" id="addBtn">新增</button>
						</div>
						<table id="blogTable" class="table table-bordered table-hover"></table>
					</div>
				</div>
			</div>
		</div>
	</section>
</div>
	
<input type="hidden" id="blogId"/>
<input type="hidden" id="userId"/>
<div th:include="main-footer"></div>
<script>
	$(function () {
		//删除数据持久化到数据库
		$("#delButton").click(function() {
			confirmDelItem();
		});
		//保存修改数据持久化到数据库
		$("#addButton").click(function (){
			check_form();
		});
		//确认重置密码弹框
		$("#confirmButton").click(function(){
			resetPwdOper();
		});
		
		//调用新增弹出框
		$("#addBtn").click(function() {
			remoteFormUrl('新增','','/user/form');
		});
		//加载列表数据
		$('#blogTable').bootstrapTable({
		    url: '/user/list',
		    pageNumber: 1,
		    pagination:true,
		    queryParams:queryParams,
		    sidePagination:'server',
		    toolbar: '#toolbar',
            showPaginationSwitch:false,
            classes:'table table-hover table-no-bordered',
            pageNumber: 1, /*默认初始页码*/
            pageSize: 10, /*每页的记录行数*/
            pageList: [10,15,20,30], /*可供选择的每页的行数*/
		    columns: [{
		        field: 'username',
		        title: '用户名'
		    },{
		    	field: 'nickname',
		        title: '昵称'
		    },{
		    	field: 'phone',
		        title: '手机号'
		    },{
		    	field: 'role.rolename',
		        title: '角色'
		    },{
		    	field: 'state',
		        title: '状态',
		        formatter: function(value, row, index) {  
		        	if(value == 0) {
		        		return "禁用";
		        	}else if(value == 1) {
		        		return "启用";
		        	}
		        }
		    },{
		    	field: 'userKey',
		        title: 'key'
		    },{
		    	field: 'salt',
		        title: 'salt'
		    },{
		        field: 'operator',
		        title: '操作'  ,
		        formatter: function(value, row, index) {  
		        	var linkStr = '<a href="javascript:void(0);" onclick="javascript:updLockStatus('+row.id+');">锁定</a>&nbsp;&nbsp;'
	                +'<a href="javascript:void(0);" onclick="javascript:resetPwd('+row.id+');">重置密码</a>&nbsp;&nbsp;'
	                +'<a href="javascript:void(0);" onclick="javascript:updBlog('+row.id+');">修改</a>&nbsp;&nbsp;'
	                +'<a href="javascript:void(0);" onclick="javascript:delBlog('+row.id+');">删除</a>&nbsp;&nbsp;';
	                if(row.role.id !='1') {
	                	/*linkStr+= '<a href="javascript:void(0);" onclick="javascript:bindInterface('+row.id+');">接口绑定</a>';*/
	                }
		            return [  
		               linkStr
		            ].join('');  
		        } 
		    }]
		});
		//请求服务数据时所传参数
		function queryParams(params){
		    return {
		        pageSize : params.limit,
		        pageIndex : params.offset/params.limit+1,
		        username : $("#queryName").val(),
		        phone : $("#queryPhone").val()
		    }
		}
	});
	
	function checkUserName(username) {
		var isCheck = false;
		$.ajax({
				url: "/user/checkUsername",
				data:{'username':username, 'id':$("#id").val()},
				type: "post",
				async: false,
				success:function(data) {
					if(data) {
						if(data.code == 1) {//操作成功
							$("#userNameMsg").html('<font color="red">用户名已存在<font>');
							$("#userNameMsg").show();
							isCheck = true;
						}else {//操作失败
							$("#userNameMsg").html('<font color="blue">用户名可用<font>');
							$("#userNameMsg").show();
						}
					}
				}
			});
		return isCheck;
	}
	
	function check_form() {
		if($("#userForm").length > 0) {
			if(!$("#userForm").valid()) {
				return;
			}
			//验证用户名是否可用
			var username = $("#username").val();
			if(username!=null && username!='') {
				if(checkUserName(username)){
					return;
				}
			}
			
			$.ajax({
				url: "/user/add",
				data:$("#userForm").serialize(),
				type: "post",
				async: false,
				success:function(data) {
					if(data) {
						if(data.code == 1) {//操作成功
							$('#addModal').modal('toggle');
							refresh();
						}else {//操作失败
							$("#msg").html(data.msg);
						}
					}
				}
			});
		}
		if($("#userBindInterfaceForm").length>0) {
			var apiInterfaceIds = '';
			if($("#apiInterfaceIds").val() != null && $("#apiInterfaceIds").val() != '') {
				apiInterfaceIds = $("#apiInterfaceIds").val().toString();
			}
			$.ajax({
				url: "/apiInterface/bindApiInterface",
				data:{'userId':$("#userId").val(), 'apiInterfaceIds':apiInterfaceIds},
				type: "post",
				async: false,
				success:function(data) {
					if(data) {
						if(data.code == 1) {//操作成功
							$('#addModal').modal('toggle');
							refresh();
						}else {//操作失败
							$("#msg").html(data.msg);
						}
					}
				}
			});
			
		}
		
	}
	
	
	function resetPwdOper() { 
		var id = $.trim($("#userId").val());
		$.get("/user/resetPwd",'id='+id, function(data){
			if(data) {
				if(data.code == 1) {//操作成功
					$("#selectModalTitle").html("查看信息");
					$("#selectModal .modal-body").html('操作成功，'+data.msg);
					$("#selectModal").modal('toggle')
			}else {//操作失败
				alert("重置失败");
			}
		}
		});
	} 
	
	function remoteFormUrl(modelTitle, recordId, reqUrl){
		$('#addModal .modal-body').html('');
		$('#addModalTitle').text(modelTitle);
		$.ajax({
			url:reqUrl,
			type: "post",
			data:{"id":recordId},
			async: false,
			success:function(data){
				$('#addModal .modal-body').html(data);
			}
		});
		$('#addModal').modal({keyboard : true, backdrop : true})
	}
	
	function updBlog(recordId) {
		remoteFormUrl('修改', recordId, '/user/form')
	}
	
	function bindInterface(recordId) {
		remoteFormUrl('接口绑定', recordId, '/user/bindInterface');
	}
	
	//刷新table
	function refresh() {
	    $('#blogTable').bootstrapTable('refresh');
	}
	//删除
	function confirmDelItem() { 
		var id = $.trim($("#blogId").val());
		$.get("/user/del",'id='+id, function(data){
			if(data) {
       		 if(data.code == 1) {//操作成功
       			$('#delModal').modal('hide');
       			refresh();
       		 }else {//操作失败
       			 alert("删除失败");
       		 }
       	  }
		});
	}  
	function delBlog(blogId){
		$("#blogId").val(blogId);
		$('#delModal .modal-body').html("<p>您确认要删除吗？</p> ");
		$('#delModal').modal({keyboard : true, backdrop : true});
	}
	
	function resetPwd(id){
		$("#userId").val(id);
		$('#confirmModal .modal-body').html("<p>您确认要重置密码吗？</p> ");
		$('#confirmModal').modal({keyboard : true, backdrop : true});
	}
	function updLockStatus(userId) {
		remoteFormUrl('修改用户信息', userId, '/user/lockStatusForm');
	}
</script>
</body>
</html>